<template>
	<VantNav title="我的咖啡券" />
	
	<van-tabs v-model:active="state" @click-tab="queryCoffee">
	  <van-tab title="待审核券" :name="1"></van-tab>
	  <van-tab title="可使用券" :name="2"></van-tab>
	  <van-tab title="不可使用券" :name="3"></van-tab>
	</van-tabs>
	
	<van-list
	  v-model:loading="loading"
	  :finished="finished"
	  :finished-text="finishText"
	  @load="onLoad">
		<div class="coffee-box">
			<van-empty description="暂无任何咖啡券" v-if="coffeeList.length === 0" />
			<CoffeeQuan v-for="item in coffeeList" :key="item.id"
				:state="state" :id="item.id"
				:start="item.applyTime" :end="item.effectTime"/>
		</div>
	</van-list>
	
	<van-tabbar v-model="active" route>
	  <van-tabbar-item icon="gift-o" :to="{name: 'home'}">我的咖啡券</van-tabbar-item>
	  <van-tabbar-item icon="label-o" :to="{name: 'apply'}">申请咖啡券</van-tabbar-item>
	</van-tabbar>
</template>

<script>
import VantNav from '../components/VantNav.vue'
import CoffeeQuan from '../components/CoffeeQuan.vue'
export default {
	components: {
		VantNav,
		CoffeeQuan, 
	},
	data() {
		return {
			state: 2,  // 设置查询咖啡券的状态, 默认 2 (已审核)
			active: 0,
			loading: false, // 代表当前没有被加载
			finished: false , //代表数据没有加载完成
			
			pagination: {
				page: 1,  // 设置当前页码
				rows: 10, // 默认显示 10条
			},
			coffeeList: [  // 存储所有的咖啡券列表数据
				{
					"id": "7",
					"applyTime": "2024/05/15",
					"effectTime": "2024/05/22"
				},
				{
					"id": "9",
					"applyTime": "2024/05/15",
					"effectTime": "2024/05/22"
				},
				{
					"id": "10",
					"applyTime": "2024/05/15",
					"effectTime": "2024/05/22"
				},
				{
					"id": "66",
					"applyTime": "2024/05/16",
					"effectTime": "2024/05/23"
				}
			], 

		}
	},
	created() {
		// 调用 我的咖啡券接口、查询数据 
		this.queryCoffee();
	},
	methods: {
		queryCoffee() {
			this.pagination.page = 1 ;
			
		},
		onLoad() {
			if (!this.finished) {
				// 负责加载每一页的数据
				this.pagination.page ++ ;
				
			}
		}
	},
	computed: {
		finishText() {
			return this.coffeeList.length === 0 ? "" : "没有更多了" ;
		}
	}
}
</script>

<style scoped>
	.van-list {
		background-color: #f0f0f0;
	}
	.coffee-box {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		padding-top: 20px;
		margin-bottom: 30px;
	}
</style>